var draggingImage = false, draggingOverDropBox = false;

var hyves_dropbox = document.createElement('div');
hyves_dropbox.id = 'hyves_dropbox';
hyves_dropbox.title = 'Drop here to upload to Hyves...';
hyves_dropbox.style.background = 'url(' + chrome.extension.getURL("icon/icon_128.png") + ')';

document.body.appendChild(hyves_dropbox);

var arrow = document.createElement('div');
arrow.id = 'hyves_dropbox_arrow';
arrow.webkitAnimationName =  'blink';
arrow.style.background = 'url(' + chrome.extension.getURL("icon/arrow.png") + ')';
arrow.webkitAnimationName =  'blink';

document.body.appendChild(arrow);


var cancel = function (e) {
	if (e.preventDefault) e.preventDefault(); // required by FF + Safari
	return false; // required by IE
};


arrow.addEventListener("webkitTransitionEnd", function(e) {
	if(e.srcElement.style.opacity == 0) {
		e.srcElement.style.height = '0';
	} 
}, true);


hyves_dropbox.addEventListener('dragover', cancel);
hyves_dropbox.addEventListener('dragenter', function (e) {
	cancel(e);
	e.srcElement.style.opacity = 1;
	draggingOverDropBox = true;
	console.log('hyves_dropbox:dragenter');
	arrow.style.height = '128px';
	arrow.style.opacity = 1;
	e.stopPropagation();
});
hyves_dropbox.addEventListener('dragleave', function (e) {
	draggingOverDropBox = false;
	e.srcElement.style.opacity = 0.5;
	console.log('hyves_dropbox:dragleave');
	arrow.style.opacity = 0;
});
hyves_dropbox.addEventListener("webkitTransitionEnd", function(e) {
	if(e.srcElement.style.opacity == 0) {
		e.srcElement.style.height = '0';
	} 
}, true);
hyves_dropbox.addEventListener('drop', function (e) {
	if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
	
	var file = e.dataTransfer.files[0];
	if (file) {

		console.log('file');
		reader = new FileReader();
		reader.onload = function (event) {
			chrome.extension.sendRequest({type: 'file', fileAsText: event.target.result, fileName: file.fileName}, function(response) {
				console.log(response.success);
			});
		};
		
		reader.readAsBinaryString(file);

	} else {
		console.log(e.dataTransfer.getData('text/html'));
		var div = document.createElement('div');
		div.innerHTML = e.dataTransfer.getData('text/html');
		var img = div.getElementsByTagName('img')[0];
		console.log(img);
		console.log(img.src);
		if (img.title) {
			var title = img.title;
		} else if(img.alt) {
			var title = img.alt;
		} else {
			var aUrlParts = img.src.split('/')
			var title = aUrlParts[aUrlParts.length - 1];
		}
		chrome.extension.sendRequest({type: 'url', url: img.src, title: title}, function(response) {
			console.log(response.success);
		});
		hideDropBox();
		console.log('blaat');
	}
	arrow.style.height = '0';
}, false);


var showDropBox = function () {
	//hyves_dropbox = document.getElementById('hyves_dropbox');
	hyves_dropbox.style.height = '128px';
	hyves_dropbox.style.opacity = 0.5;
	console.log('showDropBox');
};

var hideDropBox = function () {
	//hyves_dropbox = document.getElementById('hyves_dropbox');
	hyves_dropbox.style.opacity = 0;
	console.log('hideDropBox');
};


var aImg = document.getElementsByTagName('img');
for (var i = 0; i < aImg.length; i++) {
	aImg[i].addEventListener('dragstart', function (e) {
		draggingImage = true;
		showDropBox();
	}, false);
	aImg[i].addEventListener('dragend', function (e) {
		hideDropBox();
		draggingImage = false;
	}, false);
}


document.body.addEventListener('dragenter', function(e) {
	if (draggingImage) {
		return;
	}
	if (e.srcElement != document.body) {
		return;
	}
	showDropBox();
});
document.body.addEventListener('dragleave', function(e) {
	if (draggingImage || draggingOverDropBox) {
		return;
	}
	if (e.srcElement != document.body) {
		return;
	}
	hideDropBox();
});
